// 项目的根组件，一切组件的根基
// App被引入到了index.js,渲染到public/index.html文件中id为root的div

// 实现思路: 借助 `状态提升` 机制，通过共同的父组件进行兄弟之间的数据传递

import { useState } from "react"

// 兄弟组件通信，把A组件中的name传递到B组件
// 1. 通过子传父，A -> App
// 2. 通过父传子，App -> B

function A({onGetAname}) {
  const name = 'this is A name'
  return (
    <div>
      this is A component
      <button onClick={() => onGetAname(name)}>send</button>
    </div>
  )
}

function B({name}) {
  return (
    <div>
      this is B component,
      {name}
    </div>
  )
}

function App15() {
  const [name, setName] = useState('')
  const getAname = (name) => {
    console.log(name)
    setName(name)
  }
  return (
    <div className="App">
      this is App 
      <A onGetAname = {getAname}/>
      <B name = {name}/>
    </div>
  )
}

export default App15
